<template>
	<view class="rider-details">
		<NavBar title="骑手信息"/>
		<view class="content">
			<view class="rider-info">
				<view class="item">
					<view class="label"> 申请人 </view>
					<view class="value"> {{riderInfo.name}} </view>
				</view>
				<view class="item">
					<view class="label"> 手机号 </view>
					<view class="value"> {{riderInfo.mobile}} </view>
				</view>
				<view class="item">
					<view class="label"> 工作城市 </view>
					<view class="value"> {{riderInfo.region}} </view>
				</view>
				<view class="item">
					<view class="label"> 工作地点 </view>
					<view class="value"> {{riderInfo.region_info}} </view>
				</view>
				<view class="item">
					<view class="label"> 证件号 </view>
					<view class="value"> {{riderInfo.id_code}} </view>
				</view>
				<view class="id-box">
					<view class="label"> 证件 </view>
					<view class="id-img"> 
						<view class="id-item" @tap="previewImg([riderInfo.id_img_1])">
							<image :src="riderInfo.id_img_1" :style="{height: h}" class="i-img"/>
							<view> 身份证正面 </view>
						</view>
						<view class="id-item" @tap="previewImg([riderInfo.id_img_2])">
							<image :src="riderInfo.id_img_2" :style="{height: h}" class="i-img"/>
							<view> 身份证反面 </view>
						</view>
						<view class="id-item" @tap="previewImg([riderInfo.id_img_3])">
							<image :src="riderInfo.id_img_3" :style="{height: h}" class="i-img"/>
							<view> 手持身份证 </view>
						</view>
					</view>
				</view>
			</view>
			<view class="status">
				<view class="item">
					<view class="label"> 状态 </view>
					<view class="value"> {{riderInfo.status==0?'待审核':riderInfo.status==1?'已通过':'已驳回'}} </view>
				</view>
				<view class="item">
					<view class="label"> 提交时间 </view>
					<view class="value"> {{riderInfo.create_time}} </view>
				</view>
			</view>
			<view class="btn-box" v-if="riderInfo.status==0">
				<view class="btn" @tap="popupRef.open()"> 审核驳回 </view>
				<view class="btn" @tap="passExa"> 审核通过 </view>
			</view>
		</view>
		<PopModal title="驳回原因" ref="popupRef" textarea="请填写驳回理由" @confirm="passRej" />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import PopModal from '@/components/Modal.vue'
	import { previewImg } from '@/utils/index.js'
	import { GetRiderInfoApi, EditRiderInfoApi } from '@/service/agent.js'
	const { safeArea } = uni.getSystemInfoSync()
	const h = computed(() => ((safeArea.width - 66) / 2) / 1.56 + 'px' )
	const popupRef = ref()
	const riderInfo = ref({})
	const passExa = () => {
		let params = {
			id: riderInfo.value.id,
			status: 1
		}
		EditRiderInfoApi(params).then(res => {
			console.log(res);
			riderInfo.value.status = 1
		})
	}
	const passRej = (val) => {
		if(val=='') return getApp().globalData.toast('请输入驳回原因')
		popupRef.value.close()
		let params = {
			id: riderInfo.value.id,
			status: 2,
			reject_msg: val
		}
		EditRiderInfoApi(params).then(res => {
			riderInfo.value.status = 2
		})
	}
	onLoad((e) => {
		const { id } = e
		GetRiderInfoApi({id}).then(res => {
			riderInfo.value = res
		})
	})
</script>

<style lang="scss" scoped>
	.rider-details {
		.content {
			padding: 10px 12px 60px;
		}
		.rider-info, .status {
			padding: 0 12px;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				font-size: 14px;
				font-weight: 400;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				.label {
					color: #333333;
				}
				.value {
					color: #666666;
				}
			}
			.id-box {
				padding: 20px 4px 15px;
				.label {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 20px;
					margin-bottom: 19px;
				}
				.id-img {
					display: grid;
					gap: 10px;
					grid-template-columns: repeat(2, 1fr);
					text-align: center;
					box-sizing: border-box;
					.id-item {
						.i-img {
							width: 100%;
						}
						view {
							color: #999999;
							margin-top: 6px;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
						}
					}
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 50px;
			padding: 0 12px;
			background-color: #fff;
			.btn {
				width: 168px;
				height: 40px;
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 40px;
				text-align: center;
				border-radius: 99px;
				box-sizing: border-box;
				border: 1px solid #999999;
				&:nth-last-of-type(1) {
					border: none;
					color: #FFFFFF;
					background: #FF3B1E;
				}
			}
		}
	}

</style>
